import React, { Fragment, useEffect, useState } from 'react'

import { Col, Avatar, Row, Drawer } from 'antd';

import styles from './index.module.css'

import menuList from '../../constant/advancedMenu'

function AdvancedSetting() {

    //抽屉状态
    const [open, setOpen] = useState(false);
    //抽屉状态
    const [index, setIndex] = useState(0);


    //[]空数组相当于componentDidMount
    useEffect(() => {
        return () => {
        }
    }, []);

    const showDrawer = () => {
        setOpen(true);
    };
    const onClose = () => {
        setOpen(false);
    };


    function clickItem(index) {
        setIndex(index)
        showDrawer()
    }

    function getComponent() {
        const Component = menuList[index].component
        return <Component></Component>
    }


    function getTitle() {
        const title = menuList[index].title
        return title
    }


    return (
        <div className={styles.container}>
            <Row gutter={36}>
                {menuList.map((item, index) => {
                    return (
                        <Col key={index} span={24 / 4}>
                            <div className={styles.item_box} onClick={() => { clickItem(index) }}>
                                <Avatar shape="square" size={64} src={item.imgSrc}></Avatar>
                                <span className={styles.item_text}>{item.title}</span>
                            </div>
                        </Col>
                    );
                })}
            </Row>
            <Drawer height={'100vh'}
                closable={{ 'aria-label': 'Close Button' }}
                mask={true}
                destroyOnHidden={true}
                title={getTitle()}
                placement={"bottom"}
                onClose={onClose}
                open={open}>
                {getComponent()}
            </Drawer>
        </div>
    )
}

export default AdvancedSetting;